<script setup lang="ts">
import {ref} from 'vue'
import {FormRules} from 'naive-ui'
import {
  StnIpt,
  IptTypeConst,
  useTipStore,
  TipMessageTypeConst,
} from 'st-ui-vue3-navie'
import {ResObjPropNameConst} from 'st-common-req'
import {ResponsiveDialogForm, StnTreeCheck} from '@components'
import {useMenuStore} from '@menu'
import {RoleFormDefault} from '../consts/role-form-default'
import {RoleObjPropNameEnum} from '../enums/role-obj-prop-name-enum.ts'
import {RoleIptPropsPathEnum} from '../enums/role-ipt-props-path-enum.ts'

/**
 * 组件参数
 */
const {
  isAdd = false,
} = defineProps<{
  // 是否为新增角色信息
  isAdd?: boolean;
}>()

/**
 * 组件双向绑定
 */
// 是否显示对话框
const show = defineModel<boolean>('show')
// 表单数据
const form = defineModel<Record<string, any>>('form', {default: {...RoleFormDefault}})

// 表单验证规则
const rules: FormRules = {
  name: {
    required: true,
    message: '请输入角色名称',
    trigger: 'blur',
  },
  code: {
    required: true,
    message: '请输入角色编码',
    trigger: 'blur',
  },
  description: {
    required: true,
    message: '请输入角色描述',
    trigger: 'blur',
  },
}

// 状态选项
const statusOptions = [
  {
    label: '启用',
    value: 1,
  },
  {
    label: '禁用',
    value: 0,
  },
]

// 表单加载状态
const formLoading = ref(false)

// // 角色 API
// const roleApi = useRoleApi()

/**
 * 保存角色信息
 */
const saveRoleInfo = async (formData: typeof RoleFormDefault) => {
  formLoading.value = true
  try {
    // if (isAdd) {
    //   const res = await roleApi.addRole(formData)
    //   if (res[ResObjPropNameConst.STATUS]) {
    //     useTipStore().message('新增角色成功', TipMessageTypeConst.SUCCESS)
    //     show.value = false
    //     closeHandler.value?.()
    //   } else {
    //     useTipStore().message(res[ResObjPropNameConst.MESSAGE], TipMessageTypeConst.ERROR)
    //   }
    // } else {
    //   const res = await roleApi.updateRole(formData)
    //   if (res[ResObjPropNameConst.STATUS]) {
    //     useTipStore().message('更新角色成功', TipMessageTypeConst.SUCCESS)
    //     show.value = false
    //     closeHandler.value?.()
    //   } else {
    //     useTipStore().message(res[ResObjPropNameConst.MESSAGE], TipMessageTypeConst.ERROR)
    //   }
    // }
  } finally {
    formLoading.value = false
  }
}

const checked = ref([1, 2, 4])
</script>

<template>
  <ResponsiveDialogForm
    :title="isAdd ? '新增角色' : '编辑角色'"
    :cols="1"
    v-model:show="show"
    v-model:form="form"
    :rules="rules"
    :submit-handler="saveRoleInfo"
  >
    <n-gi>
      <StnIpt
        v-model:value="form[RoleObjPropNameEnum.NAME]"
        :predefine-props="RoleIptPropsPathEnum.NAME"
      />
    </n-gi>
    <n-gi>
      <StnIpt
        v-model:value="form[RoleObjPropNameEnum.CODE]"
        :predefine-props="RoleIptPropsPathEnum.CODE"
      />
    </n-gi>
    <n-gi>
      <StnIpt
        :value="!form[RoleObjPropNameEnum.DISABLED]"
        @update:value="() => form[RoleObjPropNameEnum.DISABLED] = !form[RoleObjPropNameEnum.DISABLED]"
        :type="IptTypeConst.SWITCH"
        :predefine-props="RoleIptPropsPathEnum.DISABLED_SWITCH"
      />
    </n-gi>
    <n-gi>
      <StnIpt
        v-model:value="form[RoleObjPropNameEnum.SORT]"
        :type="IptTypeConst.INPUT_NUMBER"
        :predefine-props="RoleIptPropsPathEnum.SORT"
      />
    </n-gi>
    <n-form-item-gi label="角色权限">
      <StnTreeCheck
        tree-class="box-border py-1 px-2 border border-solid border-gray-200 rounded-md"
        tree-max-height="200px"
        :tree-options="useMenuStore().getMenuCascadeOptions()"
        v-model:value="checked"
      />
    </n-form-item-gi>
    <n-gi>
      <StnIpt
        v-model:value="form[RoleObjPropNameEnum.REMARK]"
        :predefine-props="RoleIptPropsPathEnum.REMARK"
      />
    </n-gi>
  </ResponsiveDialogForm>
</template>
